<template>
	<view>
		<view class="head-nav">
			<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">全部</view>
			<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">退货</view>
			<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">退款</view>
		</view>
		<view class="content" v-if="navIndex==1">
			<view class="item1">
				<view class="item11">
					<image src="../../static/left.png" mode="aspectFill"></image>
					<text style="margin-left: 20rpx;">张三三</text>
					<text style="margin-left: 434rpx;">退货中</text>
				</view>
				<view>
					<text style="margin-left: 20rpx;color: #666;font-size: 20rpx;">下单时间：2021.03.14 14:20</text>
				</view>
			</view>
			<view class="item2">
				<view>
					<image src="../../static/meat.png"></image>
				</view>
				<view class="product">
					<text class="text1">带皮五花肉（300g）</text>
					<text class="text2">规格:规格一</text>
				</view>
				<view class="price">
					<text>共3件</text>
					<text style="margin-left: 30rpx;">合计:14.80元</text>
				</view>
			</view>
			<view class="item3">
				<view class="txt1">退货理由:</view>
				<view class="txt2">不想要了，不好看，不适合</view>
			</view>
			<view class="item4">
				<button type="button" class="btn1">拒绝</button>
				<button type="button" class="btn2">同意退货</button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			navIndex:1
		}
	},
	methods:{
		checkIndex(index){
			this.navIndex = index
		}
	}
}
</script>
<style> 
    page {
		background: rgb(245, 245, 245);
	}
	.head-nav {
		width: 558rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 96rpx;
		font-size: 30rpx;
		background: #fff;
	}
	.activite{
	    font-weight: bold;
	    border-bottom: 6rpx solid #FEB140;
	  }
	.content {
		width: 690rpx;
		height: 460rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		margin: 30rpx;
		/* border: 1px solid #ddd; */
	}
	.item1 {
		display: flex;
		flex-direction: column;
	}
	.item11 {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 26rpx;
		margin: 20rpx 20rpx 0rpx;
	}
	.item11 image{
		width: 40rpx;
		height: 40rpx;
	}
    .item2 {
		display: flex;
		flex-direction: row;
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
	}
	.item2 image {
		width: 80rpx;
		height: 80rpx;
	}
	.product {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		/* line-height: 60rpx; */
	}
	.product .text1 {
		font-size: 24rpx;
		color: #1A1A1A;
	}
	.product .text2 {
		font-size: 20rpx;
		color: #666666;
	}
	.item2 .price {
		font-size: 20rpx;
		color: #1A1A1A;
		line-height: 60rpx;
		margin-left: 133rpx;
		margin-top: 40rpx;
	}
	.item3 {
		margin-left: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		line-height: 60rpx;
	}
	.item3 .txt1 {
		font-size: 26rpx;
		color: #1A1A1A;
	}
	.item3 .txt2 {
		font-size: 24rpx;
		color: #666;
	}
	.item4 {
		margin-top: 30rpx;
		margin-left: 340rpx;
	}
	.item4 button{
		line-height: 40rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		border-radius: 20rpx;
		float: left;
	}
	.btn1 {
		border: 1px solid #A0A0A0;
		width: 140rpx;
		height: 40rpx;
	}
	.btn2 {
		width: 160rpx;
		height: 40rpx;
		background: #FEB140;
		margin-left: 30rpx;
	}
</style>